<template>
  <div class="">
    <el-dialog
      v-model="operate.openObj.visible"
      width="800px"
      append-to-body
      @close="cancelAddOrEdit"
    >
      <template #header>
        <div class="dialog_title">
          <div class="blueLine"></div>
          <div class="title">{{ operate.openObj.openTitle }}</div>
        </div>
      </template>

      <el-form
        :model="operate.formInfo"
        :rules="operate.rules"
        ref="operateformInfoRef"
        :label-width="appStore.language == 'zh' ? 120 : 170"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item :label="t('billsManage.inventoryName')" prop="takeStockName">
              <el-input
                :disabled="operate.openObj.openKey == 'detail'"
                v-model="operate.formInfo.takeStockName"
                :placeholder="t('billsManage.inventoryNamePlaceholder')"
                style="width: 100%"
                clearable
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item
              :label="t('billsManage.inventoryOrganization')"
              :prop="
                operate.openObj.openKey == 'add'
                  ? 'ownershipOrganizationalId'
                  : 'ownershipOrganizationalName'
              "
            >
              <el-tree-select
                v-if="operate.openObj.openKey == 'add'"
                style="width: 100%"
                clearable
                v-model="operate.formInfo.takeStockOrganizationId"
                :data="operate.organizeOptions"
                :props="{
                  label: 'Label',
                  children: 'children',
                  value: 'value',
                }"
                :placeholder="t('billsManage.inventoryOrganizationPlaceholder')"
                check-strictly
                :render-after-expand="false"
              />

              <el-input
                v-else
                disabled
                v-model="operate.formInfo.takeStockOrganizationName"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="t('billsManage.remark')" prop="remark">
              <el-input
                type="textarea"
                clearable
                :disabled="operate.openObj.openKey == 'detail'"
                v-model="operate.formInfo.remark"
                :placeholder="t('billsManage.remarkPlaceholder')"
                maxlength="200"
                style="width: 100%"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <template v-if="operate.openObj.openKey == 'detail'">
        <div class="flex_title">
          <div class="left_title">
            <div>
              {{ t("billsManage.inventoryDetailList") }}（{{ operate.detailPage.total }}）
            </div>
            <div>
              <template v-for="item in InventoryAssetsStatus">
                <el-tag
                  effect="plain"
                  style="cursor: pointer; margin-left: 10px"
                  @click="changetype(item)"
                  :type="
                    operate.detailInfo.operationStatus == item.id ? 'primary' : 'info'
                  "
                  :checked="operate.detailInfo.operationStatus == item.id"
                  >{{ t(`statusData.${item.langKey}`) }}
                </el-tag>
              </template>
            </div>
          </div>
        </div>
        <div class="table_area">
          <el-table
            ref="assetsTableRef"
            style="width: 100%"
            height="400"
            v-loading="operate.detailLoading"
            :data="operate.tableData"
            :header-cell-style="{ textAlign: 'center' }"
            :cell-style="{ textAlign: 'center' }"
          >
            <template v-for="(item, index) in columns" :key="item.key">
              <el-table-column
                v-if="item.visible"
                :prop="item.prop"
                :label="t(`tableColumns.${item.langKey}`)"
                :width="item.width"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row }">
                  <div
                    v-if="item.prop == 'assetsCode'"
                    :style="{
                      color: colors.primaryColor,
                      cursor: item.isclick ? 'pointer' : '',
                    }"
                    @click.native.stop="openAssetsDetail(row)"
                  >
                    {{ row.assetsCode }}
                  </div>
                  <el-tag
                    v-else-if="item.prop == 'operationStatus'"
                    :type="row.operationStatus == 0 ? 'warning' : 'success'"
                    >{{
                      filterStatus(
                        row.operationStatus,
                        "InventoryAssetsStatus",
                        "id",
                        "langKey"
                      )
                    }}</el-tag
                  >

                  <el-tag
                    v-else-if="item.prop == 'enableFlag'"
                    :type="
                      row.enableFlag == 0
                        ? 'success'
                        : row.enableFlag == 1 ||
                          row.enableFlag == 3 ||
                          row.enableFlag == 4
                        ? 'warning'
                        : 'danger'
                    "
                  >
                    {{ row.enableFlagName }}
                  </el-tag>
                  <span v-else>{{ row[item.prop] || "无" }}</span>
                </template>
              </el-table-column>
            </template>
          </el-table>
        </div>
        <div class="pagination-area">
          <pagination
            :total="operate.detailPage.total"
            v-model:page="operate.detailPage.pageNum"
            v-model:limit="operate.detailPage.pageSize"
            @pagination="queryList"
          />
        </div>
      </template>
      <template #footer>
        <div class="dialog-footer">
          <el-button
            v-if="operate.openObj.openKey == 'add'"
            type="primary"
            @click="submitAddOrEdit"
            :loading="operate.addLoading"
            >{{ t("common.confirm") }}</el-button
          >
          <el-button @click="cancelAddOrEdit">
            {{
              operate.openObj.openKey == "add" ? t("common.cancel") : t("common.close")
            }}
          </el-button>
        </div>
      </template>
    </el-dialog>

    <detail
      v-if="assetsDetailInfo.openObj.visible"
      :asset-detail-info="assetsDetailInfo"
    ></detail>
  </div>
</template>

<script setup>
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import useAppStore from "@/store/modules/app";
const appStore = useAppStore();
import colors from "@/assets/styles/variables.module.scss";
import detail from "@/components/AshDialog/detail.vue"; //资产详情
import { InventoryCheckDetailColums } from "@/utils/table/assetsInventoryColums";
import { GetAssetsList } from "@/api/assetsManage/assetsList";
import { assetsStatus, InventoryAssetsStatus } from "@/utils/statuData";
const emit = defineEmits(["submitAddOrEdit", "cancelAddOrEdit", "queryDetailList"]);
const { proxy } = getCurrentInstance();

const props = defineProps({
  operate: {
    type: Object,
    default: true,
  },
});

const columns = InventoryCheckDetailColums;

const disabledDate = (time) => {
  return time.getTime() > Date.now();
};
const resetAddOrEdit = () => {
  nextTick(() => {
    if (proxy.$refs.operateformInfoRef) {
      proxy.$refs.operateformInfoRef.resetFields();
      proxy.$refs.operateformInfoRef.clearValidate();
    }
  });
};
//盘点状态切换查询
const changetype = (row) => {
  props.operate.detailInfo.operationStatus = row.id;
  emit("queryDetailList");
};

//提交盘点单
const submitAddOrEdit = () => {
  proxy.$refs["operateformInfoRef"].validate((valid) => {
    if (!valid) return;
    console.log("props.operate.formInfo", props.operate.formInfo);
    emit("submitAddOrEdit", props.operate.formInfo);
  });
};
//取消
const cancelAddOrEdit = () => {
  resetAddOrEdit();
  emit("cancelAddOrEdit", props.operate.formInfo);
};
//资产详情
const assetsDetailInfo = reactive({
  openObj: {
    visible: false,
    openTitle: "",
  },
  form: {},
});
const openAssetsDetail = (row) => {
  assetsDetailInfo.openObj = {
    visible: true,
    openTitle: t("assetsList.viewAssetsDialogTitle"),
  };

  const params = {
    pagination: 0,
    pageRow: 100,
    isInit: true,
    assetsCode: row.assetsCode,
    enableFlag: row.enableFlag,
    IsCheck: -1,
  };
  GetAssetsList(params)
    .then((res) => {
      console.log(11111, res);
      assetsDetailInfo.form = res.output.output[0];
    })
    .catch((err) => {});
};

const queryList = () => {
  emit("queryDetailList");
};
</script>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.dialog_title {
  display: flex;
  font-weight: 700;

  .blueLine {
    color: #1065ff;
    background: #1065ff;
    width: 5px;
    height: auto;
    border-radius: 3px;
    margin-right: 10px;
  }
  .title {
    color: #000;
  }
}
.flex_title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  .left_title {
    color: $--color-primary;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
}
</style>
